@import '../vars';

.page-header {
  color: @colorReverse;
  padding: 5rem 6rem;
  text-align: center;
  background-color: #159957;
  background-image: linear-gradient(120deg, #155799, #159957);

  .project-name {
    font-size: 3.25rem;
    margin: 0.5rem;
  }

  .project-desc {
    font-size: 1.25rem;
    padding: 1rem;
  }

  .header-actions {
    padding: 2rem 0 0;

    .btn-header {
      font-size: 1rem;
      font-family: inherit;
      color: @colorReverse;
      line-height: 1.5;
      background: transparent;
      height: auto;
      padding: 0.5rem 1rem;
      border-color: @borderColorReverse;

      &:hover {
        border-color: @borderColor;
      }

      a {
        text-decoration: none;
        color: inherit;

        &:visited {
          color: inherit;
        }
      }
    }
  }
}

.theme-dark {
  .page-header {
    color: @colorDark;
    background-color: @bkColorDark;
    // background-image: linear-gradient(120deg, #051423, #041b0f);
    background-image: none;
    border-bottom: 1px solid @borderColorDark;

    .project-name {
      font-size: 3.25rem;
      margin: 0.5rem;
    }

    .project-desc {
      font-size: 1.25rem;
      padding: 1rem;
    }

    .header-actions {
      padding: 2rem 0 0;

      .btn-header {
        font-size: 1rem;
        font-family: inherit;
        color: @colorReverse;
        line-height: 1.5;
        background: transparent;
        height: auto;
        padding: 0.5rem 1rem;
        border-color: @borderColorDark;
        opacity: 0.7;

        &:hover {
          border-color: @borderColor;
        }

        a {
          text-decoration: none;

          &:visited {
            color: inherit;
          }
        }
      }
    }
  }
}
